<template>
  <div class="v-flow-config-section">
    <div class="config-section-title">条件组合</div>
    <div class="condition-group">
      <ConditionItem
        v-for="(con, i) in conditions"
        :key="i"
        :index="i"
        :total="conditions.length"
        :arr="con"
        :optionNum="optionForms.length"
        @remove="remove"
        @edit="edit"
        @addOption="addOption"
      />
    </div>
    <el-button @click="addGroup">
      <el-icon><Plus /></el-icon>添加条件组
    </el-button>
    <FormOptionDialog :arr="optionForms" ref="formOptionDialog" @updateOption="updateOption" />
  </div>
</template>

<script setup lang="ts">
import * as FlowPanel from '../../FlowPanel'
import ConditionItem from './components/ConditionItem.vue'
import FormOptionDialog from './components/FormOptionDialog.vue'
import type { Properties } from '../../types'
// 所有流程节点
const { flowList } = inject<any>('flowTree', {
  flowList: []
})
// 当前节点 - 条件节点
const { currentNode } = inject<any>('drawer', {
  currentNode: FlowPanel.createNode()
})
// 所有表单控件
const { formList } = inject<{ formList: any }>('formData', {
  formList: []
})
const { getProperties, updateProperties } = inject<{
  getProperties: () => any
  updateProperties: (data: Properties) => void
}>('nodeConfig', {
  getProperties: () => {
    return {}
  },
  updateProperties: () => {}
})
const formOptionDialog = ref<any>()
const currentIndex = ref<number>(0)
const conditions = ref<any>()
const one = ref([
  {
    type: 3,
    id: 'start',
    key: 'start',
    label: '发起人',
    actioners: [
      {
        id: '1',
        name: '2'
      }
    ]
  }
])
// 可选择的表单项条件
const optionForms = computed(() => {
  const arr = formList.value.filter((el: any) => {
    return (
      (el.formType === 'NumberInput' ||
        el.formType === 'SingleSelect' ||
        el.formType === 'MultipleSelect' ||
        (el.formType === 'DateRangeSelect' && el.config.isCalculate)) &&
      el.config.required
    )
  })
  return one.value.concat(arr)
})
// 新增条件组内判断
const addOption = (arr: any[], index: number) => {
  formOptionDialog.value?.open(arr)
  currentIndex.value = index
}
// 更新条件组配置
const updateOption = (arr: any[]) => {
  const nowArr = arr.map((el: any) => {
    const old = conditions.value[currentIndex.value].find((o: any) => o.id === el.id)
    if (old) {
      return old
    } else {
      return el
    }
  })
  edit(nowArr, currentIndex.value)
}
// 添加条件组
const addGroup = () => {
  conditions.value.push(JSON.parse(JSON.stringify(one.value)))
  update()
}
// 编辑条件组
const edit = (arr: any, index: number) => {
  conditions.value = conditions.value.map((el: any, i: number) => {
    if (i === index) {
      return arr
    } else {
      return el
    }
  })
  update()
}
// 移除条件组
const remove = (index: number) => {
  conditions.value = conditions.value.filter((el: any, i: number) => i !== index)
  update()
}
const update = () => {
  const properties = getProperties()
  properties.conditions = conditions.value
  updateProperties(properties)
}
onMounted(() => {
  const properties = getProperties()
  if (properties.conditions && properties.conditions.length) {
    conditions.value = properties.conditions
  } else {
    conditions.value = [JSON.parse(JSON.stringify(one.value))]
  }
})
</script>
